<template>
  <section>
    <el-form label-width="80px" size="mini">
      <el-form-item label="标题">
        <el-input style="width: 200px" v-model="currClass.title" placeholder="请输入标题" />
      </el-form-item>
      <el-form-item label="描述">
        <el-input style="width: 400px" type="textarea" v-model="currClass.description" placeholder="请输入描述" />
      </el-form-item>
      <el-form-item label="起止日期">
        <el-row>
          <el-col :span="11">
            <el-date-picker size="mini" v-model="currClass.start" type="datetime"
                            placeholder="选择开始日期" default-time="12:00:00"
                            format="yyyy-MM-dd" value-format="timestamp">
            </el-date-picker>
          </el-col>
          <el-col :span="2">~</el-col>
          <el-col :span="10">
            <el-date-picker size="mini" v-model="currClass.end" type="datetime"
                            placeholder="选择结束日期" default-time="12:00:00" value-format="timestamp"
                            format="yyyy-MM-dd">
            </el-date-picker>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="招生人数">
        <el-input style="width: 100px" v-model="currClass.min" placeholder="最低人数" />~
        <el-input style="width: 100px" v-model="currClass.max" placeholder="上限人数" />
      </el-form-item>
      <el-form-item label="课时" v-if="currClass.id">
        <period :course="currClass"></period>
      </el-form-item>
      <el-form-item label="">
        <el-button size="mini" type="success" @click="confirmBtn(currClass)">{{currClass.id?'保存':'新建'}}</el-button>
      </el-form-item>
    </el-form>
  </section>
</template>

<script>
  import period from '@/components/course/period/periodList'
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import Vue from 'vue'//后续添加属性，需要vue联动
  import errHandler from '@/assets/errHandler'
  import dateFormater from '@/common/date-formater'
  export default {
    name: "editClass",
    components:{period},
    props:['currClass'],
    data(){
      return{

      }
    },
    methods:{
      ...mapActions({
        fetch: 'fetch'
      }),
      confirmBtn(currClass){
        currClass.start=dateFormater.format(currClass.start)
        currClass.end=dateFormater.format(currClass.end)
        if(currClass.id) this.updateClass(currClass)
        else this.createClass(currClass)
      },
      updateClass(data){
        this.fetch({name:"updateClass",data})
          .then(res=>{
            this.$message({type:'success',message:'更新成功！'})
            // this.$emit('cancel')
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      createClass(data){
        this.fetch({name:"createClass",data})
          .then(res=>{
            this.$message({type:'success',message:'新建成功！'})
            // this.currClass=res
            this.currClass.start=res.start
            this.currClass.end=res.end
            Vue.set(this.currClass,'id',res.id)
            // this.$emit('cancel')
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      }
    }
  }
</script>

<style scoped>

</style>
